<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <el-form
      ref="dataForm"
      :model="listQuery"
      label-position="left"
      status-icon
      label-width="90px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="日期范围">
            <el-select v-model="listQuery.datetype" placeholder="请选择">
              <el-option
                v-for="item in datetypelist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="预约状态">
            <el-select v-model="listQuery.status" placeholder="请选择">
              <el-option
                v-for="item in statuslist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="查看日期">
            <el-date-picker
              v-model="listQuery.datetime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="实验楼">
            <el-select v-model="listQuery.group2" placeholder="请选择">
              <el-option
                v-for="item in grouplist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="楼层">
            <el-select v-model="listQuery.group1" placeholder="请选择">
              <el-option
                v-for="item in grouplist2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="实验室">
            <el-select v-model="listQuery.group2" placeholder="请选择">
              <el-option
                v-for="item in grouplist3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" icon="el-icon-search">查询</el-button>
          <el-button type="success" icon="el-icon-plus" @click="dialogVisiblefrom=true">新增预约</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 查询结果 -->
      <div class="block" v-show="listQuery.datetype==1">
          <el-timeline>
            <el-timeline-item timestamp="2023-08-03 09:00:00 至 2023-08-03 10:30:00" placement="top">
              <el-card>
                <h4>预约人员:刘备</h4>
                <h5>实验主题:样品化验</h5>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2023-08-03 12:00:00 至 2023-08-03 14:30:00" placement="top">
              <el-card>
                <h4>预约人员:张飞</h4>
                <h5>实验主题:样品化验</h5>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2023-08-03 16:00:00 至 2023-08-03 17:30:00" placement="top">
              <el-card>
                <h4>预约人员:关羽</h4>
                <h5>实验主题:样品化验</h5>
              </el-card>
            </el-timeline-item>
          </el-timeline>
    </div>
    <div class="block" v-show="listQuery.datetype==2">
      <el-tabs>
        <el-tab-pane :label="item.label" v-for="(item,index) in weeklist" :key="index">
          <el-timeline>
            <el-timeline-item :timestamp="`${item.value} 09:00:00 至 ${item.value} 10:30:00`" placement="top">
              <el-card>
                <h4>预约人员:刘备</h4>
                <h5>实验主题:样品化验</h5>
              </el-card>
            </el-timeline-item>
            <el-timeline-item :timestamp="`${item.value} 12:00:00 至 ${item.value} 14:30:00`" placement="top">
              <el-card>
                <h4>预约人员:张飞</h4>
                <h5>实验主题:样品化验</h5>
              </el-card>
            </el-timeline-item>
            <el-timeline-item :timestamp="`${item.value} 16:00:00 至 ${item.value} 17:30:00`" placement="top">
              <el-card>
                <h4>预约人员:关羽</h4>
                <h5>实验主题:样品化验</h5>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
      </el-tabs>
    </div>
     <div class="block" v-show="listQuery.datetype==3">
      <el-calendar>
        <template
          slot="dateCell"
          slot-scope="{date, data}"
        >
          <div class="is-selected mydate" v-if="activedate(date)"  @click="testdate(date)">
            {{ data.day.split('-').slice(1).join('-') }}
          </div>
          <div class="mydate" v-else>
            {{ data.day.split('-').slice(1).join('-') }}
          </div>
        </template>
      </el-calendar>
     </div>
     <!-- ---- -->
     <el-dialog
      title="预约详情"
      :visible.sync="dialogVisible"
      :fullscreen="true"
      :before-close="handleClose">
      <el-timeline>
            <el-timeline-item timestamp="2023-08-03 09:00:00 至 2023-08-03 10:30:00" placement="top">
              <el-card>
                <h4>预约人员:刘备</h4>
                <h5>实验主题:样品化验</h5>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2023-08-03 12:00:00 至 2023-08-03 14:30:00" placement="top">
              <el-card>
                <h4>预约人员:张飞</h4>
                <h5>实验主题:样品化验</h5>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2023-08-03 16:00:00 至 2023-08-03 17:30:00" placement="top">
              <el-card>
                <h4>预约人员:关羽</h4>
                <h5>实验主题:样品化验</h5>
              </el-card>
            </el-timeline-item>
          </el-timeline>
    </el-dialog>
    <el-dialog
      title="新增预约"
      :visible.sync="dialogVisiblefrom"
      width="60%"
      top="20px"
      :before-close="handleClosefrom">
      <el-form ref="dataForm" :model="dataForm" label-width="80px">
        <el-form-item label="预约日期:">
          <el-date-picker
            v-model="dataForm.reservationdate"
            type="date"
            placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="预约时间:">
         <el-time-picker
            is-range
            v-model="dataForm.reservationtime"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="预约主题:">
          <el-input type="textarea" v-model="dataForm.reservationtitle"></el-input>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">用户列表 <i class="el-icon-search" @click="searchVisibleuse=true" style="color:#409EFF;font-size:18px;cursor: pointer;"></i></el-divider>
      <el-table :data="list1" border>
        <el-table-column type="index" label="序号" width="50"/>
        <el-table-column prop="id"  label="人员编号" />
        <el-table-column prop="username"  label="人员姓名"/>
        <el-table-column   label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="danger" @click="list1.splice(scope.$index,1)">删除</el-button>
          </template>
        </el-table-column>
      </el-table> 
      <el-divider content-position="left">设备名称 <i class="el-icon-search" @click="equipmentInfoVisible=true" style="color:#409EFF;font-size:18px;cursor: pointer;"></i></el-divider>
      <el-table :data="list2" border>
        <el-table-column type="index" label="序号" width="50"/>
        <el-table-column prop="fequipmentname"  label="设备名称"/>
        <el-table-column prop="fbarcode"  label="设备固定资产码"/>
        <el-table-column prop="fmacno"  label="开始时间">
          <template slot-scope="scope">
            <el-time-select
                v-model="scope.row.begtime"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30'
                }"
                placeholder="选择时间">
              </el-time-select>
          </template>
        </el-table-column>
        <el-table-column prop="felccurrent"  label="结束时间">
           <template slot-scope="scope">
           <el-time-select
            v-model="scope.row.endtime"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30'
            }"
            placeholder="选择时间">
          </el-time-select>
          </template>
        </el-table-column>
        <el-table-column   label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="danger" @click="list2.splice(scope.$index,1)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
       <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisiblefrom = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisiblefrom = false">确 定</el-button>
  </span>
    </el-dialog>
    <userDialog :searchVisibleuse.sync="searchVisibleuse" :fsiteNo.sync="userDialogFsiteNo" :tableColor="tableColor"
      @userDialog="userDialogValue" />
    <equipmentInfoDialog
      :equipmentInfoVisible.sync="equipmentInfoVisible"
      :tableColor="tableColor"
      @equipmentInfoDialog="equipmentInfoDialogValue"
    />
  </div>
</template>
  
<script>
import UserDialog from "@/components/UserDialog/index"
import EquipmentInfoDialog from "@/components/EquipmentInfoDialog";
import { tableColor } from '@/filters/index'
export default {
  name: "unit",
  components:{UserDialog,EquipmentInfoDialog},
  data() {
    return {
      tableColor,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: this.$store.state.user.fsiteNo,
        datetype: 1,
        status: "1",
        datetime: [],
        group:'1',
        group1:'1',
        group2:'1',
      },
      userDialogFsiteNo:this.$store.state.user.fsiteNo,
      searchVisibleuse:false,
      equipmentInfoVisible:false,
      dataForm:{
        reservationdate:new Date(),
        reservationtime:[new Date(), new Date()],
        reservationtitle:"",
      },
      list1:[],
      list2:[],
      dialogVisible:false,
      dialogVisiblefrom:false,
      weeklist:[],
      weekday: ["日", "一", "二", "三", "四", "五", "六"],
      activelist:[],
      datetypelist: [
        { value: 1, label: "日" },
        { value: 2, label: "周" },
        { value: 3, label: "月" },
      ],
      statuslist: [
        { value: "1", label: "全部" },
        { value: "2", label: "已审核" },
        { value: "3", label: "未审核" },
      ],
      grouplist: [
        { value: "1", label: "A栋" },
        { value: "2", label: "B栋" },
        { value: "3", label: "C栋" },
      ],
      grouplist2: [
        { value: "1", label: "1楼" },
        { value: "2", label: "2楼" },
        { value: "3", label: "3楼" },
      ],
      grouplist3: [
        { value: "1", label: "101室" },
        { value: "2", label: "102室" },
        { value: "3", label: "103室" },
      ],
    };
  },
  created() {
    this.getweekList();
  },
  methods: {
    getweekList() {
       let date = new Date();
       this.activelist=[];
      this.weeklist=[];
      for(let i=0;i<7;i++)
      {
        this.weeklist.push({value:this.$moment(date).format("YYYY-MM-DD"),label:this.$moment(date).format("MM/DD")+'星期'+this.weekday[new Date(date).getDay()]});
        this.activelist.push(this.$moment(date).format("YYYY-MM-DD"))
        date =  new Date(date).getTime() + 24 * 60 * 60 * 1000;
      }
    },
    testdate(e){
      console.log(e)
      this.dialogVisible=true;
    },
    //判断日期是否选择
    activedate(data){
      var act=false;
      for(let i=0;i<this.activelist.length;i++)
      {
        if(new Date(data).getTime()==new Date(this.activelist[i]).getTime())
        {
          act=true;
          break;
        }
      }
      return act;
    },
    handleClose(){
      this.dialogVisible=false;
    },
    handleClosefrom(){
      this.dialogVisiblefrom=false;
    },
    userDialogValue(res){
      this.list1.push(res.user)
      this.searchVisibleuse=false;
    },
    equipmentInfoDialogValue(res){
      console.log(res)
      this.list2.push(res.info)
      this.equipmentInfoVisible=false;
    },
  },
};
</script>
<style>
.is-selected {
  background-color: #1989FA;
  opacity: 0.8;
}
.el-calendar-table .el-calendar-day{
  padding: 0;
}
.mydate{
  text-align:center;
  height:100%;
  width:100%;
  line-height: 90px;
}
</style>
  